<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { getVideoAPI } from '@/api/video'
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'

const route = useRoute()
const router = useRouter()
const goBack = () => {
  router.go(-1)
}

const videoInfo = ref({})
const getVideo = async () => {
  const { data: res } = await getVideoAPI(route.path.split('/').at(-1))
  if (res.status === 200) {
    videoInfo.value = res.data
    videoOptions.value.title = res.data.videoName
    videoOptions.value.src = res.data.videoSrc
  }
}
getVideo()

// vue3播放器
const videoOptions = ref({
  width: '75rem', //播放器高度
  height: '43.75rem', //播放器高度
  color: '#409eff', //主题色
  title: '', //视频名称
  src: '', //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
  speed: false, // 是否可以快进
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 1, //默认音量大小
  control: true, //是否显示控制,
  current: '', //已播放时长
  controlBtns: [
    'audioTrack',
    'quality',
    'speedRate',
    'volume',
    'pip',
    'pageFullScreen',
    'fullScreen'
  ] //显示所有按钮
})
const currentTime = ref(0)
const handleTimeUpdate = (event) => {
  currentTime.value = event.target.currentTime
}
</script>

<template>
  <div class="videoInfo-container">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3">
          {{ videoInfo.videoName }}
        </span>
      </template>
    </el-page-header>
    <div class="videoInfo-content">
      <videoPlay
        class="videoInfo-video"
        v-bind="videoOptions"
        :currentTime="currentTime"
        @timeupdate="handleTimeUpdate"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.videoInfo-container {
  padding: 1.25rem 3.75rem;
  .el-page-header {
    padding: 1rem 0;
  }
  .videoInfo-content {
    padding: 1.25rem 2.5rem;
    .videoInfo-video {
      width: 50rem;
    }
  }
}
</style>
